<template>
    <div
        class="wh-100% flex flex-col h-120px bg-#fff rounded-8px box-border shadow cursor-pointer hover:shadow-xl p-10px"
    >
        <div class="w-full flex">
            <div
                class="wh-64px flex-center rounded-full border border-solid border-#e5e5e5"
            >
                <n-icon :component="Easel" :size="32" />
            </div>
            <div class="flex-1 py-10px pl-16px">
                <div class="font-bold font-size-16px">
                    {{ item.name }}
                </div>
                <n-tag class="mr-8px" size="small"> {{ item.area }}㎡ </n-tag>
                <n-tag
                    size="small"
                    :type="item.maintained ? 'error' : 'primary'"
                    >{{ item.maintained ? "维修中" : "正常" }}
                </n-tag>
            </div>
        </div>
        <n-divider />
        <div class="flex-1">
            <n-tag size="small" :type="isUseing ? 'info' : 'default'">
                {{ isUseing ? "使用中" : "空闲" }}
            </n-tag>
            <n-divider vertical />

            <!-- v-if 和 v-for在大规模数据里混用会出现性能问题, 此处因为数组较小所以为了方便而使用 -->
            <template v-for="(val, key, i) in item.device" :key="i">
                <n-tag size="small" class="mr-8px" v-if="val">
                    {{ deviceLabel[key] }}
                </n-tag>
            </template>
        </div>
    </div>
</template>

<script lang="ts" setup>
import type { MeetingRoom } from "@/service/api/types/room";

import { Easel } from "@vicons/ionicons5";

defineProps<{
    item: MeetingRoom;
    isUseing?: boolean;
}>();

const deviceLabel = {
    speaker: "扬声器",
    projector: "投影仪",
    internet: "互联网",
};
</script>

<style scoped></style>
